<template>
    <view class="order-submit-item" v-if="item">
        <view class="item-top">
            <image
                v-if="!getAppSet().isHideImg"
                class="product-img"
                :src="item.V_ThumbnailUrl160 ? easyGetImgUrl(item.V_ThumbnailUrl160) : '/static/img/no-img.jpg'"
                mode="aspectFill"></image>
            <view class="product-info">
                <text class="product-name">{{ item.V_Title }}</text>
            </view>
        </view>
        <view class="item-center">
            <view class="pro-item">
                <view class="left">
                    <text class="label" v-if="item.V_AttributeNameValue"
                        ><text class="specification">{{
                            item.V_AttributeNameValue ? item.V_AttributeNameValue : "默认规格"
                        }}</text></text
                    >
                    <text class="label">
                        <text class="price-bold">￥{{ item.V_GradePrice }}</text>
                        <text class="value product-num"
                            >x{{ item.Amount }}{{ item.UnitName ? item.UnitName : item.RationUnit }}</text
                        >
                    </text>
                </view>
                <view class="right">
                    <text class="value price-text">小计：￥{{ item.TotalMoney.toFixed(2) }}</text>
                </view>
            </view>
        </view>
        <view class="item-bottom" v-if="false">
            <input placeholder="商品备注信息" />
        </view>
    </view>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {
            userPolicy: {},
            isShowSelect: false,
        }
    },
    mounted() {},
    methods: {
        select(item) {
            let obj = {
                CarId: this.item.ID,
                PolicyId: item.ID,
            }
            this.userPolicy = item
            this.close()
            this.$emit("changePolicy", obj)
        },
        close() {
            this.$refs.popPolicy.close()
        },
        open() {
            this.$refs.popPolicy.open()
        },
        changePop(e) {
            this.isShowSelect = e.show
        },
    },
}
</script>

<style lang="scss">
.order-submit-item {
    display: flex;
    flex-direction: column;
    border-bottom: 12rpx solid #f1f1f1;
    margin-left: -24rpx;
    margin-right: -24rpx;
    padding-left: 24rpx;
    padding-right: 24rpx;
    padding-bottom: 24rpx;

    .item-top {
        display: flex;
        flex-direction: row;
        margin-top: 24rpx;
        .product-img {
            width: 120rpx;
            height: 120rpx;
            border-radius: $border-radius-10;
            margin-right: 20rpx;
        }

        .product-info {
            display: flex;
            flex-direction: column;
            flex: 1;

            .product-name {
                font-weight: 700;
                font-size: $font-size-28;
                color: $app-color-text-mian;
                flex: 1;
                margin-bottom: 14rpx;
            }

            .policy-text {
                flex: 1;
                padding-right: 12rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: normal;
                display: flex;
                color: #fa6400;
            }

            .arrow {
                border: solid #333333;
                border-width: 0 1px 1px 0;
                padding: 3px;
            }

            .arrow-down {
                margin-top: -4rpx;
            }

            .btn {
                flex-direction: row;
                font-size: $font-size-20;
                margin-left: 0;
            }
        }

        .btn-yellow-hollow {
            height: 48rpx;
            margin-bottom: 20rpx;
            width: auto;
            border-radius: 4rpx;
            border-color: rgba(0, 0, 0, 0);
            background: #ffffff;
            border: 1rpx solid #fa6400;
            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }
    }

    .item-center {
        background: #f7f7f7;
        padding: 14rpx 24rpx;
        margin-top: 20rpx;
        .item-cell {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-bottom: 8rpx;

            .label {
                display: flex;
                flex: 1;
                color: $app-color-text-tip;
            }

            .value {
                display: flex;
                justify-content: flex-end;
            }
        }
    }

    .item-bottom {
        border-radius: $border-radius-10;
        padding: $app-page-padding;
        background: $app-color-input-bg;

        input {
            font-size: $font-size-24;
            color: $app-color-text-tip;
        }
    }
}

.policy-item {
    .policy-name {
        display: flex;
        flex: 1;
    }
}

.total-price {
    color: $app-color-main;
}

.product-num {
    color: $color-gray-1;
    font-size: 28rpx;
}

.pro-item {
    display: flex;
    flex-direction: row;

    .left {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: 4rpx;
        .label {
            font-size: 26rpx;
            color: $app-color-text-tip;
            padding: 6rpx 0;
            text {
                font-size: 26rpx;
            }
            .specification {
                font-size: 30rpx;
                color: $color-gray-1;
            }
        }
        .price-bold {
            color: #000;
            font-size: 32rpx;
            font-weight: bold;
            padding-right: 14rpx;
        }
    }

    .right {
        display: flex;
        align-items: center;

        .price-text {
            font-size: $font-size-28;
            color: $color-gray-1;
        }
    }
}
.remark {
    display: flex;
    padding: 24rpx 0;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #2f2f2f;
    text {
        color: $color-gray-3;
    }
}
</style>
